<template>
	<view
		class="message-item u-flex u-col-center"
		@click="$emit('click',message)"
	>
		<!-- 头像 -->
		<u-avatar
			:src="message.avatar"
			mode="square"
			size="100"
		/>
		<!-- 右侧 - 聊天人 -->
		<view class="right u-flex-1">
			<view class="head u-flex u-col-center">
				<aha-ellipsis
					class="name u-flex-1"
					:content="message.name"
				/>
				<view class="time">{{message.updateTime | msgTime}}</view>
			</view>
			<view class="footer u-flex u-col-center">
				<aha-ellipsis
					class="u-flex-1"
					:content="msgContext"
				/>
				<aha-unread :count="message.unreadCount" />
			</view>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  computed: {
    msgContext() {
      if (this.message.withdraw) {
        return '[该消息已被撤回]'
      } else if (this.message.type === 'voice') {
        return '[语音消息]'
      } else if (this.message.type === 'image') {
        return '[图片]'
      } else if (this.message.type === 'video') {
        return '[视频]'
      }
      return this.message.content
    }
  }
}
</script>

<style lang="scss" scoped>
.message-item {
  padding: 10px;

  .right {
    margin-left: 10px;
    line-height: 25px;

    .head {
      .name {
        font-size: $sNormal;
        font-weight: bold;
        color: $dark1;
      }

      .time {
        font-size: $sMini;
      }
    }
  }
}
</style>
